<template>
    <div class="topfilter">

        <div>
            <h4>热点区域</h4>
        </div>
        <div class="topfilter-tabs">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="v.label" :name="v.name" v-for="v in topfilterlist" :key="v.id">
                    <el-button v-for="(k, index) in v.list" :key="index" plain>{{ k }}</el-button>
                </el-tab-pane>
            </el-tabs>
        </div>



        <div>
            <h4>星级价格</h4>
        </div>
        <div class="topfilter-price">
            <el-button v-for="(k, index) in pricelist" :key="index" plain>{{ k }}</el-button>
        </div>


        <div>
            <h4>高级筛选</h4>
        </div>
        <div class="topfilter-advanced">
            <el-dropdown v-for="v in advancedlist" :key="v.id">
                <span class="el-dropdown-link">
                    {{ v.title }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(name, i) in v.list" :key="i">{{ name }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>




    </div>
</template>



<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
const activeName = ref('first')

// 定义tabs点击事件的数据
let topfilterlist = ref(
    [
        { id: 1, name: 'first', label: '热门筛选', list: ['天安门广场', '北京大学', '王府井'] },
        { id: 2, name: 'second', label: '机场车站', list: ['北京南站', '北京火车站', '北京汽车站'] },
        { id: 3, name: 'third', label: '商业区', list: ['三里屯', '卫矛地区', '西直门'] },
        { id: 4, name: 'fourth', label: '景点', list: ['刹那海', '前门大街府', '五道口'] }
    ]
)

let pricelist = ref(
    [
        '0-500', '500-1000', '1000-1500', '五星级', '四星级', '三星级', '150元以下'
    ]
)



let advancedlist = ref(
    [
        { id: 1, title: '早餐', list: ['含早餐', '单份早', '多份早'] },
        { id: 2, title: '支付方式', list: ['闪住', '在线', '到店付款'] },
        { id: 3, title: '房型', list: ['大床房', '三床房', '单人间'] },
        { id: 4, title: '酒店设施', list: ['健身房', '免费WiFi', '停车场', '洗澡池'] },
        { id: 5, title: '住宿类型', list: ['酒店', '民宿', '青年旅舍', '家庭旅馆', '露营'] },
        { id: 6, title: '特色主题', list: ['日式', '中式', '欧式'] },
        { id: 7, title: '品牌', list: ['希尔顿', '格林豪泰','万豪','喜来登','维也纳','汉庭','7天连锁酒店'] },
        { id: 8, title: '评分', list: ['8.0', '7.0', '9.0', '10.0'] }
    ]
)   
</script>

<style scoped></style>